<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <meta http-equiv=X-UA-Compatible content="ie=edge">
  <title>Document</title>
  <link rel=stylesheet href=../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css>
  <link rel=stylesheet href=../css/base.css>
  <link rel=stylesheet href=../css/cart.css>
  <style>
    h1 {
            background-color: #fff;
            display: flex;
            height:30px ;
            line-height: 30px;
        }

        h1>i {
            flex: 78%
        }

        h1>a{
            border: 0;
            background-color: #fff;
            flex: 5%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>a:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>a:active{
            background-color: #fff;
            text-decoration: none;
        }
        h1>button{
            border: 0;
            background-color: #fff;
            flex: 6%;
            color: #d2691e;
            font-size: 20px;
            text-decoration: none;
        }

        h1>button:hover {
            color: rgb(20, 187, 90);
            background-color: #fff;
            text-decoration: none;
        }
        h1>button:active{
            background-color: #fff;
            text-decoration: none;
        }
  </style>
</head>

<body>
  <h1><i></i> <a href=./reg.html role=button>注册</a>
    <a href=JavaScript:; name=login role=button>登录</a>
    <button name=logout role=button>退出登录</button>
    <button name=cart role=button>购物车</button>
</h1>
  <div class=container></div>
  <script src=../js/jquery.min.js></script>
  <script src="../js/cookie.js"></script>
  <script>
  setPage();
  const cookieObj = myGetCookie();
        $('[name="logout"]').click(function () {
            if (cookieObj.login === undefined) {
                window.alert('对不起您还没登陆');
            } else {
                mySetCookie('login', 1, -1, '/');
                window.alert('您已经成功退出登录');
            }
        });

        $('[name="cart"]').click(function () {
            if (cookieObj.login === undefined) {
                if (window.confirm('您还没登陆，点击跳转登录')) {
                    window.location.href = './login.html';
                }
            } else {
                window.location.href = './cart.html';
            }
        });
        $('[name="login"]').click(function () {
            window.location.href = `./login.html?url=${window.location.href}`;
        });
    $('.container').click(function (e) {
      let cart = JSON.parse(localStorage.cart);

      if (e.target.getAttribute('name') === 'all') {
        cart.forEach(item => {
          item.buy = e.target.checked;
        })
      } else if (e.target.getAttribute('name') === 'goods') {
        cart[e.target.getAttribute('index')].buy = e.target.checked;
      } else if (e.target.getAttribute('name') === 'del') {
        cart.splice(e.target.getAttribute('index'), 1);
      } else if (e.target.getAttribute('name') === '-') {
        cart[e.target.getAttribute('index')].num = cart[e.target.getAttribute('index')].num - 0 - 1;
      } else if (e.target.getAttribute('name') === '+') {
        cart[e.target.getAttribute('index')].num = cart[e.target.getAttribute('index')].num - 0 + 1;
      }
      console.log(cart);
      localStorage.cart = JSON.stringify(cart);
      setPage();
    })
    function setPage() {
      let cart = localStorage.cart;
      if (cart === undefined) {
        $('.container').html('<h1>你还没买东西</h1>');
      } else {
        cart = JSON.parse(cart);
        if (cart.length === 0) {
          $('.container').html('<h1>购物车是空的</h1>');
        } else {
          let bool = true;
          let type = 0;
          let number = 0;
          let pay = 0;

          // 第一部分
          let str = `
            <div class="panel panel-info ">
              <div class="panel-body bg-info">
                <div class="checkbox">
                  <label>
                    <input name="all" type="checkbox" value="">
                    全选
                  </label>
                </div>
              </div>
            <div class="panel-footer">
            <ul class="cart-list">
            `;
          // 第二部分
          cart.forEach((item, key) => {
            if (item.buy === false) {
              bool = false;
            } else {
              type++;
              number += item.num - 0;
              pay += (item.num - 0) * (item.goods_price - 0);
            }
            str += `
                  <li class="cart-item">
                    <div class="left">
                      <input name="goods" index="${key}"  goods_id="${item.goods_id}" type="checkbox" ${item.buy ? 'checked' : ''}>
                    </div>
                    <div class="right">
                      <div class="media">
                        <div class="media-left">
                          <a href="#">
                            <img class="media-object"
                              src="${item.goods_small_logo}" alt="...">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">${item.goods_name}</h4>
                          <p>
                            <i class="glyphicon glyphicon-yen"></i>
                            <span>${item.goods_price}</span>
                          </p>
                          <div class="btn-group pull-right" role="group" aria-label="...">
                            <button name="-" index="${key}" type="button" class="btn btn-default" ${item.num === 1 ? 'disabled' : ""}>-</button>
                            <button type="button" class="btn btn-default" disabled>${item.num}</button>
                            <button name="+" index="${key}" type="button" class="btn btn-default" ${item.num === item.goods_number - 0 ? 'disabled' : ""}>+</button>
                          </div>
                          <button name="del" index="${key}" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>
                        </div>
                      </div>
                    </div>
                  </li>
              `;
          })
          // 第三部分
          str += `
              </ul>
              </div>
              <div>
                <h1>您一共购买${type}种商品</h1>
                <h1>您一共购买${number}件商品</h1>
                <h1>您需要支付${pay.toFixed(2)}元金额</h1>
              </div>
              </div>
            `;
          $('.container').html(str);
          $('[name="all"]').prop('checked', bool);

        }
      }
    }</script>
</body>

</html>